# 功能类问题

## 样式处理

### bundleless 模式如何跳过对 Less / Sass 等文件的预处理？

bundleless 是指对每个源文件单独进行编译构建，可以理解为仅对源文件进行代码转换的过程。跳过对 `.less/.scss` 文件的预处理需要：

1. 设置 `source.entry` 将 `.less/.scss` 文件从入口里移除。
2. 设置 `output.copy` 将 `.less/.scss` 文件拷贝到产物目录。
3. 设置 `redirect.style.extension` 为 `false` 禁用对 `.less/.scss` 文件导入路径的重定向行为。

下面是一个跳过 `.scss` 文件处理的例子，`src` 里面所有的 `.scss` 文件都会被拷贝到产物目录下并且保留一致的相对路径。

```ts title="rslib.config.ts"
export default defineConfig({
  lib: [
    {
      // ...
      source: {
        entry: {
          index: ['./src/**', '!src/**/*.scss'],
        },
      },
      output: {
        copy: [{ from: '**/*.scss', context: path.join(__dirname, 'src') }],
      },
      redirect: {
        style: {
          extension: false,
        },
      },
    },
  ],
});
```

## 代码压缩

### 如何保留产物文件代码中的注释？

默认情况下，Rslib 使用 SWC 清除注释，对应的 SWC 的 [jsc.minify.format](https://swc.rs/docs/configuration/minification#jscminifyformat) 配置为

```js
{
    comments: 'some',
    preserveAnnotations: true,
}
```

这将仅保留部分 legal 注释及 annotations。如果你想保留所有注释，可以参考如下配置

```ts title="rslib.config.ts"
export default {
  lib: [
    // ...
  ],
  output: {
    minify: {
      jsOptions: {
        minimizerOptions: {
          format: {
            comments: 'all', // 将保留所有注释
          },
        },
      },
    },
  },
};
```

### 如何在保留代码可读性的同时，尽可能压缩产物体积？

通过压缩代码可以减小产物体积，并提高加载速度，但是压缩后的代码可读性较差，不利于调试。如果你想保留代码可读性，可以通过如下配置，保留变量名并禁用压缩以方便调试。参考 [web-infra-dev/rsbuild#966](https://github.com/web-infra-dev/rsbuild/pull/3966).

```ts title="rslib.config.ts"
export default {
  lib: [
    // ...
  ],
  output: {
    minify: {
      jsOptions: {
        minimizerOptions: {
          // 保留变量名并禁用压缩以方便调试
          mangle: false,
          minify: false,
          compress: true,
        },
      },
    },
  },
};
```

## 类型声明文件生成

### 如何在 `dts.bundle` 为 `true` 时额外排除指定的依赖？

Rslib 通过 [rsbuild-plugin-dts](https://github.com/web-infra-dev/rslib/blob/main/packages/plugin-dts/README.md) 完成对类型声明文件的生成，该插件支持通过 [output.externals](/config/rsbuild/output#outputtarget) 进行配置，用于从打包后的类型声明文件中排除指定的依赖。

举个例子：常见的 React 组件库通常不会将 `@types/react` 声明在 `peerDependencies` 中，而是仅声明在 `devDependencies`，按照 [autoExternal](/config/lib/auto-external) 处理依赖的逻辑，在打包时 Rslib 会尝试将 `@types/react` 一同打包进类型声明文件产物中，但在实践中组件库并不应该打包 `@types/react`。

此时可以通过配置 [output.externals](/config/rsbuild/output#outputtarget) 来排除 `@types/react`。

```ts title="rslib.config.ts"
export default {
  lib: [
    // ...
  ],
  output: {
    externals: ['@types/react'],
  },
};
```
